<template>
  <div>
    <header>
      <div class="header">
        <div class="warp">
          <div class="logo">
            <el-image
              style="width: 220px; height: 80px"
              lazy
              :src="logo"
              fit="contain"
            ></el-image>
          </div>
          <nav>
            <div
              v-for="(item, index) in data"
              :key="index"
              class="item a-link"
              @click="target('router', item.link)"
            >
              <span class="icon iconfont" :class="item.icon"></span>
              <span>•</span>
              <span>{{ item.text }}</span>
            </div>
          </nav>
          <div class="search">
            <el-popover width="350" trigger="hover">
              <header-hot-note />
              <span
                slot="reference"
                class="a-link icon iconfont icon-zuixin"
              ></span>
            </el-popover>
            <span>|</span>
            <span
              @click="target('search')"
              class="a-link icon iconfont icon-linedesign-12"
            ></span>
          </div>
        </div>
      </div>
    </header>
    <el-drawer :visible.sync="search" direction="ttb" size="100%">
      <header-search-note v-on:target="target" />
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "blog-header",
  data() {
    return {
      logo: require("~/assets/img/logo.jpg"),
      data: [
        {
          icon: "icon-aixinjuanzeng",
          text: "首页",
          link: "/",
        },
        {
          icon: "icon-taohua",
          text: "笔记",
          link: "/note",
        },
        // {
        //   icon: "icon-taohua",
        //   text: "杂谈",
        //   link: "/random",
        // },
        {
          icon: "icon-taohua",
          text: "关于我",
          link: "/about/me",
        },
      ],
      search: false,
    };
  },
  mounted() {},
  methods: {
    target(key, data) {
      switch (key) {
        case "router":
          this.$router.push({
            path: data,
          });
          break;
        case "search":
          this.search = true;
          break;
        case "searchClose":
          this.search = false;
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
header {
  height: 90px;
  background-color: #ffffff;
  box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.08);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  .header {
    position: relative;
    .warp {
      display: flex;
      align-items: center;
      height: 90px;
      width: 1170px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      padding: 0px 15px;
      box-sizing: border-box;
      .logo {
        width: 220px;
        height: 90px;
        font-size: 20px;
        margin-right: 30px;
        padding: 5px 0px;
      }
      nav {
        display: flex;
        align-items: center;
        // justify-content: center;
        height: 90px;
        flex: 1;
        .item {
          font-size: 17px;
          margin: 0px 15px;
          .icon {
            font-size: 18px;
          }
        }
      }
      .search {
        font-size: 20px;
        span {
          margin: 0px 15px;
        }
      }
    }
  }
}
</style>